<template>
  <div data-v-homepage123 class="homepage">
    <div class="top-box">
      <div class="top-box-img">
        <img src="@/assets/img/homepagedf1.jpg" alt="" />
      </div>
      <div v-if="isMe" class="top-box-tx">
        <el-upload
          class="avatar-uploader"
          action=""
          ref="upload"
          accept="image/*"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="submitFace"
        >
          <img :src="userinfo.user_pic" alt="" />
        </el-upload>
      </div>

      <div v-else class="top-box-tx">
        <img :src="userinfo.user_pic" alt="" />
      </div>

      <div v-if="!isMe" class="top-box-btn">
        <span v-if="!isFollow" @click="toFollow">关注</span
        ><span v-else @click="cancelFollow">已关注</span
        ><span @click="toWhisper">发消息</span>
      </div>
      <span class="top-box-username">{{ userinfo.username }}</span
      ><span class="top-box-desc">{{ userinfo.user_desc }}</span>
    </div>
    <div class="body-box">
      <div class="contain-box">
        <div class="menu-box">
          <el-tabs
            class="menu-left"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="主页" name="home">
              <section class="section-box">
                <div class="section-box-top">
                  <h2>视频</h2>
                  <span
                    @click="
                      activeName = 'video';
                      getVideoZone(-1);
                    "
                    >More+</span
                  >
                </div>
                <div class="section-box-body">
                  <div
                    v-for="item in sliceVideoList"
                    :key="item.id"
                    class="section-box-body-list"
                  >
                    <img
                      :src="item.cover"
                      alt=""
                      @click="toVideoDesc(item.id)"
                    />
                    <span class="title" @click="toVideoDesc(item.id)">{{
                      item.title
                    }}</span>
                    <span class="info"
                      ><i class="iconfont icon-good-fill">{{
                        item.likes_count
                      }}</i
                      ><i class="iconfont icon-calendar-fill">{{
                        item.upload_date
                      }}</i></span
                    >
                  </div>
                </div>
              </section>
              <section class="section-box">
                <div class="section-box-top">
                  <h2>专栏</h2>
                  <span
                    @click="
                      activeName = 'posts';
                      getPostZone(-1);
                    "
                    >More+</span
                  >
                </div>
                <div class="section-box-body">
                  <div
                    v-for="item in slicePostList"
                    :key="item.id"
                    class="section-box-body-list"
                  >
                    <img
                      :src="item.cover"
                      alt=""
                      @click="toPostDesc(item.id)"
                    />
                    <span class="title" @click="toPostDesc(item.id)">{{
                      item.title
                    }}</span>
                    <span class="info"
                      ><i class="iconfont icon-calendar-fill">{{
                        item.upload_date
                      }}</i></span
                    >
                  </div>
                </div>
              </section>
              <section class="section-box">
                <div class="section-box-top">
                  <h2>收藏</h2>
                  <span @click="activeName = 'collection'">More+</span>
                </div>
                <div v-if="isMe || !hideCollection" class="section-box-body">
                  <div
                    v-for="item in sliceCollectionFolde"
                    :key="item.id"
                    class="section-box-body-list"
                  >
                    <div class="folde-item">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </div>
                <div v-else class="section-box-body">
                  <span class="hide-tips">该用户隐藏了收藏!</span>
                </div>
              </section>
            </el-tab-pane>
            <el-tab-pane label="视频" name="video">
              <section class="video-sort">
                <span
                  :class="[activeVideoZone == -1 ? 'isActive' : '']"
                  @click="getVideoZone(-1)"
                  >全部</span
                >
                <span
                  :class="[activeVideoZone == 0 ? 'isActive' : '']"
                  @click="getVideoZone(0)"
                  >音乐</span
                >
                <span
                  :class="[activeVideoZone == 1 ? 'isActive' : '']"
                  @click="getVideoZone(1)"
                  >游戏</span
                >
                <span
                  :class="[activeVideoZone == 2 ? 'isActive' : '']"
                  @click="getVideoZone(2)"
                  >动漫</span
                >
                <span
                  :class="[activeVideoZone == 3 ? 'isActive' : '']"
                  @click="getVideoZone(3)"
                  >美食</span
                >
              </section>
              <section
                v-for="item in videoListZone"
                :key="item.id"
                class="video-list"
              >
                <div class="video-list-cover">
                  <img :src="item.cover" alt="" @click="toVideoDesc(item.id)" />
                </div>
                <div class="video-list-content">
                  <div class="top-box">
                    <h2 @click="toVideoDesc(item.id)">{{ item.title }}</h2>
                  </div>
                  <div class="body-box">
                    <p>{{ item.video_desc }}</p>
                  </div>
                  <div class="bottom-box">
                    <span
                      ><i class="likes iconfont icon-good-fill">{{
                        item.likes_count
                      }}</i
                      ><i class="date iconfont icon-calendar-fill">{{
                        item.upload_date
                      }}</i></span
                    >
                  </div>
                </div>
              </section>
            </el-tab-pane>
            <el-tab-pane label="专栏" name="posts">
              <section class="video-sort">
                <span
                  :class="[activePostZone == -1 ? 'isActive' : '']"
                  @click="getPostZone(-1)"
                  >全部</span
                >
                <span
                  :class="[activePostZone == 0 ? 'isActive' : '']"
                  @click="getPostZone(0)"
                  >音乐</span
                >
                <span
                  :class="[activePostZone == 1 ? 'isActive' : '']"
                  @click="getPostZone(1)"
                  >游戏</span
                >
                <span
                  :class="[activePostZone == 2 ? 'isActive' : '']"
                  @click="getPostZone(2)"
                  >动漫</span
                >
                <span
                  :class="[activePostZone == 3 ? 'isActive' : '']"
                  @click="getPostZone(3)"
                  >生活</span
                >
              </section>
              <section
                v-for="item in postListZone"
                :key="item.id"
                class="video-list"
              >
                <div class="video-list-content">
                  <div class="top-box">
                    <h2>
                      {{ item.title }}
                    </h2>
                  </div>
                  <div class="body-box">
                    <p>
                      {{
                        item.content
                          .replace(/&lt;[^>]+>/g, "")
                          .slice(0, 120)
                          .concat("...")
                      }}
                    </p>
                  </div>
                  <div class="bottom-box">
                    <span
                      ><i class="date">{{ item.upload_date }}</i></span
                    >
                  </div>
                </div>
                <div class="video-list-cover">
                  <img :src="item.cover" alt="" />
                </div>
              </section>
            </el-tab-pane>
            <el-tab-pane
              v-if="isMe || !hideCollection"
              label="收藏"
              name="collection"
            >
              <section class="video-sort">
                <span
                  v-for="item in collectionFolder"
                  :key="item.id"
                  :class="[activeCollectionZone == item.id ? 'isActive' : '']"
                  class="collection-folder"
                  @click="getCollectionZone(item.id)"
                  >{{ item.name }}
                  <i
                    v-if="isMe && item.id !== 1"
                    class="iconfont icon-close"
                    @click.stop="delFolder(item.id)"
                  ></i>
                </span>
                <span
                  v-if="isMe"
                  class="iconfont icon-add-select"
                  @click="addFolder"
                ></span>
              </section>
              <section
                class="section-box"
                style="
                  width: 98%;
                  min-height: 500px;
                  margin: 10px auto;
                  border-radius: 10px;
                "
              >
                <div class="section-box-body">
                  <div
                    v-for="item in collectionListZone"
                    :key="item.id"
                    class="section-box-body-list"
                    style="width: 307px"
                  >
                    <img
                      :src="item.cover"
                      alt=""
                      @click="toVideoDesc(item.id)"
                    />
                    <span class="title" @click="toVideoDesc(item.id)">{{
                      item.title
                    }}</span>
                    <span class="info"
                      ><i class="iconfont icon-collection-fill">{{
                        item.collection_count
                      }}</i
                      ><i class="iconfont icon-calendar-fill">{{
                        item.upload_date
                      }}</i></span
                    >
                  </div>
                </div>
              </section>
            </el-tab-pane>
            <el-tab-pane v-if="isMe" label="个人中心" name="account">
              <section class="account-item account-info">
                <h2>我的信息</h2>
                <el-form
                  label-position="left"
                  label-width="100px"
                  :model="infoForm"
                  class="account-form"
                >
                  <!-- <el-form-item label="昵称" style="width: 400px">
                    <el-input v-model="infoForm.nickname"></el-input>
                  </el-form-item> -->
                  <el-form-item label="用户名" style="width: 400px">
                    <el-input
                      :disabled="true"
                      v-model="infoForm.username"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="性别" style="width: 160px">
                    <el-select v-model="infoForm.sex" @change="editUserInfo">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="个人简介" style="width: 600px">
                    <el-input
                      type="textarea"
                      v-model="infoForm.user_desc"
                      :autosize="{ minRows: 4, maxRows: 6 }"
                      @change="editUserInfo"
                      style="font-size: 16px"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <!-- <span class="account-info-btn">保存</span> -->
              </section>
              <section class="account-item account-setting">
                <h2>隐私设置</h2>
                <div class="account-switch">
                  <span class="account-switch-title">公开我的收藏</span>
                  <el-switch
                    v-model="collectionSwitchValue"
                    active-color="#00a0d8"
                    inactive-color="rgb(177, 174, 174)"
                    @change="changeHideCollcetion"
                  >
                  </el-switch>
                  <span class="account-switch-desc" v-if="collectionSwitchValue"
                    >公开</span
                  >
                  <span
                    class="account-switch-desc"
                    style="color: rgb(177, 174, 174)"
                    v-else
                    >隐藏</span
                  >
                </div>
              </section>
              <section class="account-item account-security">
                <h2>账号安全</h2>
                <div class="account-security-item">
                  <span>设置密码</span>
                  <span>已设置</span>
                  <span @click="editPassDialogVisible = true">修改密码</span>
                </div>
                <div class="account-security-item">
                  <span>绑定邮箱</span>
                  <span>{{ userinfo.email }}</span>
                  <span @click="updateEmailDialogVisible = true">更换邮箱</span>
                </div>
              </section>
            </el-tab-pane>
          </el-tabs>

          <div class="menu-right">
            <span
              :data-count="followList.length"
              @click="
                FollowDialogVisible = true;
                selectType = 'follow';
              "
              >关注数</span
            >
            <span
              :data-count="fansList.length"
              @click="
                FollowDialogVisible = true;
                selectType = 'fans';
              "
              >粉丝数</span
            >
            <span :data-count="count.UserLikesCount">点赞数</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="editPassDialogVisible"
      width="30%"
      center
      :destroy-on-close="true"
    >
      <el-form
        label-position="left"
        label-width="60px"
        :model="editPassForm"
        style="margin-top: 20px"
      >
        <el-form-item label="旧密码">
          <el-input type="password" v-model="editPassForm.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="editPassForm.newPass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatePass">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 更换邮箱框 -->
    <el-dialog
      title="更换邮箱"
      :visible.sync="updateEmailDialogVisible"
      width="40%"
      center
      :before-close="updateClose"
    >
      <el-steps
        :active="active"
        finish-status="success"
        simple
        style="margin: 20px 0"
      >
        <el-step title="验证邮箱"></el-step>
        <el-step title="绑定邮箱"></el-step>
        <el-step title="绑定成功"></el-step>
      </el-steps>

      <div v-if="active == 1" class="update-body">
        <div class="update-item">
          <el-input :disabled="true" v-model="updateEmailForm.oldEmail">
            <template slot="prepend">绑定邮箱</template>
          </el-input>
        </div>
        <div class="update-item">
          <el-input
            placeholder="请输入验证码"
            v-model="updateEmailForm.oldEmailCode"
          >
            <el-button
              slot="append"
              style="
                background-color: #fff;
                border: 2px solid #e3e3e3;
                color: #000;
              "
              :disabled="disabledBtnOld"
              @click="getOldCode(updateEmailForm.oldEmail, $event)"
              >{{ oldCodeHtml }}</el-button
            >
          </el-input>
        </div>
        <div class="update-item">
          <el-button class="btn" type="primary" @click="confirmOldEmail"
            >下一步</el-button
          >
        </div>
      </div>

      <div v-else-if="active == 2" class="update-body">
        <div class="update-item">
          <el-input
            placeholder="请输入新邮箱"
            v-model="updateEmailForm.newEmail"
          >
          </el-input>
        </div>
        <div class="update-item">
          <el-input
            placeholder="请输入验证码"
            v-model="updateEmailForm.newEmailCode"
          >
            <el-button
              slot="append"
              style="
                background-color: #fff;
                border: 2px solid #e3e3e3;
                color: #000;
              "
              :disabled="disabledBtnNew"
              @click="getNewCode(updateEmailForm.newEmail, $event)"
              >{{ newCodeHtml }}</el-button
            >
          </el-input>
        </div>
        <div class="update-item">
          <el-button class="btn" type="primary" @click="confirmNewEmail"
            >下一步</el-button
          >
        </div>
      </div>

      <div v-else class="update-body">
        <h2>更换邮箱成功!</h2>
      </div>
    </el-dialog>

    <!-- 关注用户框 -->
    <el-dialog
      :title="userinfo.username"
      :visible.sync="FollowDialogVisible"
      width="30%"
      center
      class="dialog-user-box"
    >
      <div class="dia-user-box">
        <el-tabs class="dia-user-box-tabs" v-model="selectType">
          <el-tab-pane label="关注" name="follow">
            <div
              v-for="followItem in followList"
              :key="followItem.id"
              class="dia-user-box-list"
            >
              <img :src="followItem.user_pic" alt="" />
              <span>{{ followItem.username }}</span>
              <el-button class="btn" @click="toSendMsg(followItem.user_id)"
                >发消息</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane label="粉丝" name="fans">
            <div
              v-for="fansItem in fansList"
              :key="fansItem.id"
              class="dia-user-box-list"
            >
              <img :src="fansItem.user_pic" alt="" />
              <span>{{ fansItem.username }}</span>
              <el-button class="btn" @click="toSendMsg(fansItem.fans)"
                >发消息</el-button
              >
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { putObject } from "@/upload.js";

export default {
  name: "HomePage",

  data: function () {
    return {
      activeName: "home",
      selectType: "follow",
      activeVideoZone: -1,
      activePostZone: -1,
      activeCollectionZone: 1,
      isFollow: false,
      isMe: false,
      hideCollection: 0, // 0 公开， 1 隐藏

      userinfo: {},
      videoList: [],
      postList: [],
      collectionList: [],
      collectionFolder: [],

      videoListZone: [],
      postListZone: [],
      collectionListZone: [],

      count: {
        UserLikesCount: 0,
      },

      followList: [],
      fansList: [],

      infoForm: {
        username: "",
        sex: "",
        user_desc: "",
      },

      collectionSwitchValue: true,

      editPassDialogVisible: false,
      editPassForm: {
        oldPass: "",
        newPass: "",
      },

      updateEmailDialogVisible: false,
      active: 1,
      updateEmailForm: {
        oldEmail: "",
        oldEmailCode: "",
        newEmail: "",
        newEmailCode: "",
      },

      disabledBtnOld: false,
      disabledBtnNew: false,
      oldCodeHtml: "获取验证码",
      newCodeHtml: "获取验证码",

      FollowDialogVisible: false,
    };
  },

  computed: {
    sliceVideoList: function () {
      // console.log(this.videoList.slice(0, 10));
      return this.videoList.slice(0, 10);
    },

    slicePostList: function () {
      // console.log(this.videoList.slice(0, 10));
      return this.postList.slice(0, 5);
    },

    sliceCollectionFolde: function () {
      // console.log(this.collectionList);
      return this.collectionFolder.slice(0, 5);
    },
  },

  created() {
    this.getFollow();
    this.getuser();
    this.getUserVideo();
    this.getUserPost();
    this.getCollectionVideo();
    this.getUserLikesCount();
    this.getUserFansCount();
    this.getCollectionFolder();
  },

  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      if (this.activeVideoZone == -1) {
        this.videoListZone = this.videoList;
      }

      if (this.activeCollectionZone == 1) {
        this.getCollectionZone(1);
      }

      if (this.activePostZone == -1) {
        this.postListZone = this.postList;
      }
    },

    // 获取用户信息
    getuser() {
      this.axios
        .get(`getuser/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.userinfo = response.data.data;
            this.isMe = response.data.isMe;
            this.hideCollection = response.data.data.hide_collection;

            if (this.hideCollection === 0) {
              this.collectionSwitchValue = true;
            } else {
              this.collectionSwitchValue = false;
            }

            // console.log(this.userinfo);

            this.infoForm = {
              username: response.data.data.username,
              sex: response.data.data.sex,
              user_desc: response.data.data.user_desc,
            };

            this.updateEmailForm.oldEmail = response.data.data.email;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    changeHideCollcetion(value) {
      // console.log(value);

      let hidevalue = 0;

      if (!value) {
        hidevalue = 1;
      }

      this.axios
        .post(`updateHideCollection`, {
          value: hidevalue,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    editUserInfo() {
      this.axios
        .post(`editUserInfo`, this.infoForm)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getUserLikesCount() {
      this.axios
        .get(`getUserLikesCount/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data.data);
            this.count.UserLikesCount = response.data.data.count;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getUserFansCount() {
      this.axios
        .get(`getUserFansCount/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.followList = response.data.data.followList;
            this.fansList = response.data.data.fansList;
            // this.count.fansCount = response.data.data.fans_count;
            // this.count.beFansCount = response.data.data.befans_count;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getUserVideo() {
      this.axios
        .get(`getUserVideo/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.videoList = response.data.data;

            // console.log(this.videoList);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getUserPost() {
      this.axios
        .get(`getUserPostList/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.postList = response.data.data;

            // console.log(this.postList);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getCollectionVideo() {
      this.axios
        .get(`getCollectionVideo/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.collectionList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getFollow() {
      this.axios
        .get(`getFollow/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.isFollow = response.data.data;

            // console.log(response.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取收藏夹
    getCollectionFolder() {
      this.axios
        .get(`getCollectionFolder/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.collectionFolder = response.data.data;
            this.getCollectionZone(1);
            // console.log(response.data.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    addFolder() {
      this.$prompt("请输入收藏夹名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          if (value === "" || value === null) {
            return false;
          } else {
            return true;
          }
        },
        inputErrorMessage: "请输入收藏夹名",
      })
        .then(({ value }) => {
          this.axios
            .post(`addCollectionFolder`, {
              folderName: value,
            })
            .then((response) => {
              if (response.data.status == 200) {
                // console.log(response.data);
                this.collectionFolder.push(response.data.data);
                this.$message({
                  type: "success",
                  message: "创建成功，收藏夹名是: " + value,
                });
              } else {
                console.log(response);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    delFolder(id) {
      // console.log(id);
      if (id === 1) {
        return this.$message({
          message: "默认收藏夹不能删除!",
          type: "warning",
        });
      }

      this.$confirm("此操作将永久删除该收藏夹, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get(`deleteCollectionFolder/${id}`)
            .then((response) => {
              if (response.data.status == 200) {
                // console.log(response.data);
                this.getCollectionFolder();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                console.log(response);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 关注用户
    toFollow() {
      this.isFollow = true;
      this.axios
        .get(`addFollow/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.$message({
              type: "success",
              message: "添加关注!",
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    cancelFollow() {
      this.isFollow = false;
      this.axios
        .get(`cancelFollow/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.$message({
              type: "success",
              message: "取消关注!",
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    toVideoDesc(id) {
      // console.log(id);
      // this.$router.push(`/video/${id}`);
      const res = this.$router.resolve(`/video/${id}`);
      window.open(res.href, "_blank");
    },

    toPostDesc(id) {
      const res = this.$router.resolve(`/post/${id}`);
      window.open(res.href, "_blank");
    },

    toWhisper() {
      const res = this.$router.resolve(`/whisper/${this.$route.params.id}`);
      window.open(res.href, "_blank");
    },

    toSendMsg(id) {
      const res = this.$router.resolve(`/whisper/${id}`);
      window.open(res.href, "_blank");
    },

    getVideoZone(name) {
      this.activeVideoZone = name;
      this.videoListZone = [];

      if (name == -1) {
        this.videoListZone = this.videoList;
      } else {
        this.videoList.forEach((item) => {
          if (item.region == name) {
            this.videoListZone.push(item);
          }
        });
      }
    },

    getPostZone(name) {
      this.activePostZone = name;
      this.postListZone = [];

      if (name == -1) {
        this.postListZone = this.postList;
      } else {
        this.postList.forEach((item) => {
          if (item.region == name) {
            this.postListZone.push(item);
          }
        });
      }
    },

    getCollectionZone(name) {
      // console.log(name);
      this.activeCollectionZone = name;
      this.collectionListZone = [];

      this.collectionList.forEach((item) => {
        if (item.folder_id == name) {
          this.collectionListZone.push(item);
        }
      });

      // console.log(this.collectionListZone);
    },

    updateClose(done) {
      this.active = 1;

      done();
    },

    getOldCode(email, event) {
      if (!email) {
        return this.$message({
          message: "邮箱不能为空!",
          type: "warning",
        });
      }

      // event.target : 触发此事件的对象；event.currentTarget ：设置了此监听事件的对象
      // console.log(email, event.target, event.currentTarget);

      let time = 10;
      let _this = this;

      let codeTime = setInterval(function () {
        time--;
        if (time === 0) {
          clearInterval(codeTime);
          _this.oldCodeHtml = "获取验证码";
          _this.disabledBtnOld = false;
        } else {
          _this.oldCodeHtml = `${time}秒后重发`;
          _this.disabledBtnOld = true;
        }
      }, 1000);

      this.axios
        .get(`api/email?email=${email}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.$notify({
              title: "成功",
              message: "获取验证码成功!",
              type: "success",
            });
          } else {
            console.log(response.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 验证旧邮箱验证码
    confirmOldEmail() {
      // console.log(this.updateEmailForm.oldEmailCode);
      if (!this.updateEmailForm.oldEmailCode) {
        return this.$message({
          message: "验证码不能为空!",
          type: "warning",
        });
      }

      // 判断验证码是否正确
      this.axios
        .post(`api/compareEmailCode`, {
          email: this.updateEmailForm.oldEmail,
          code: this.updateEmailForm.oldEmailCode,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.active++;
          } else if (response.data.status == 202) {
            this.$message.error(response.data.msg);
          } else {
            console.log(response.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getNewCode(email, event) {
      if (!email) {
        return this.$message({
          message: "邮箱不能为空!",
          type: "warning",
        });
      }

      // event.target : 触发此事件的对象；event.currentTarget ：设置了此监听事件的对象
      // console.log(email, event.target, event.currentTarget);

      let time = 10;
      let _this = this;

      let codeTime = setInterval(function () {
        time--;
        if (time === 0) {
          clearInterval(codeTime);
          _this.newCodeHtml = "获取验证码";
          _this.disabledBtnNew = false;
        } else {
          _this.newCodeHtml = `${time}秒后重发`;
          _this.disabledBtnNew = true;
        }
      }, 1000);

      this.axios
        .get(`api/email?email=${email}`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.$notify({
              title: "成功",
              message: "获取验证码成功!",
              type: "success",
            });
          } else {
            console.log(response.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    confirmNewEmail() {
      if (
        !this.updateEmailForm.newEmailCode ||
        !this.updateEmailForm.newEmail
      ) {
        return this.$message({
          message: "邮箱或验证码不能为空!",
          type: "warning",
        });
      }

      // 判断验证码是否正确
      this.axios
        .post(`api/compareEmailCode`, {
          email: this.updateEmailForm.newEmail,
          code: this.updateEmailForm.newEmailCode,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.updateEmail();
          } else if (response.data.status == 202) {
            this.$message.error(response.data.msg);
          } else {
            console.log(response.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 更改邮箱
    updateEmail() {
      this.axios
        .post(`editEmail`, {
          email: this.updateEmailForm.newEmail,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);

            this.active++;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    updatePass() {
      if (this.editPassForm.oldPass == "" || this.editPassForm.newPass == "") {
        return this.$message({
          message: "密码不能为空!",
          type: "warning",
        });
      }

      this.axios
        .post(`editPass`, {
          oldPass: this.editPassForm.oldPass,
          newPass: this.editPassForm.newPass,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.editPassDialogVisible = false;
            this.$message({
              message: "修改密码成功!",
              type: "success",
            });
            // this.active++;
          } else if (response.data.status == 202) {
            // console.log(response);
            this.$message({
              message: response.data.msg,
              type: "error",
            });
            // this.active++;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    async submitFace(file, fileList) {
      // console.log(file);

      let result = await putObject(file.raw, "uploads/userpic").then((data) => {
        return data;
      });

      this.userinfo.user_pic = result.url;

      await this.axios
        .post(`upload/facehead`, {
          url: result.url,
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.$message({
              message: "更换头像成功!",
              type: "success",
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
.menu-left {
  .el-tabs__nav {
    margin-left: 18px;

    .el-tabs__item {
      height: 100%;
      line-height: 60px;
      font-size: 18px;
    }

    .el-tabs__active-bar {
      width: 72px;
    }
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-form {
    .el-form-item__label {
      font-size: 18px;
      color: #000;
    }

    .el-form-item__content {
      font-size: 18px;
    }
  }
}

.dialog-user-box {
  .el-dialog__body {
    padding: 0 8px;

    .el-tabs__item {
      font-size: 18px;
    }
  }

  .el-dialog__header {
    border: none;
  }
}

.dia-user-box {
  height: 500px;
  overflow: auto;

  .dia-user-box-tabs {
    .dia-user-box-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      span {
        font-size: 16px;
        flex: 1;
        margin: 0 15px;
      }

      & > .btn {
        margin-right: 10px;
        padding: 10px 5px;

        span {
          font-size: 16px;
        }
      }
    }
  }
}

.top-box-tx {
  .el-upload {
    width: 100%;
    height: 100%;
  }
}
</style>

<style lang="scss" scoped>
.homepage[data-v-homepage123] {
  width: 100%;
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .top-box {
    position: relative;
    width: 100%;
    height: 25%;

    .top-box-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .top-box-tx {
      position: absolute;
      left: 40px;
      bottom: 30px;
      width: 60px;
      height: 60px;

      .avatar-uploader {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px rgb(177, 174, 174) solid;

        transition: opacity 0.3s;
      }

      .avatar-uploader:hover {
        opacity: 0.7;
      }

      .avatar-uploader:hover ::after {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        content: "更换";
        font-size: 12px;
        color: #fff;
      }

      img {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        cursor: pointer;
      }
    }

    .top-box-username {
      position: absolute;
      left: 110px;
      bottom: 65px;
      font-size: 18px;
      font-weight: 700;
      color: #fb7299;
    }

    .top-box-desc {
      position: absolute;
      left: 110px;
      bottom: 40px;
      width: 600px;
      color: #fff;
    }

    .top-box-btn {
      position: absolute;
      right: 50px;
      bottom: 8px;

      span {
        display: inline-block;
        padding: 5px 20px;
        color: #e3e3e3;
        background-color: #fb7299;
        border-radius: 6px;
        box-sizing: border-box;
        cursor: pointer;
      }

      span:nth-child(1) {
        margin-right: 10px;
        border: 2px solid #e3e3e3;
      }

      span:nth-child(2) {
        background-color: #59575c;
        border: 2px solid #59575c;
      }
    }
  }

  .body-box {
    width: 100%;
    height: 75%;
    // background-color: orangered;

    .contain-box {
      width: 100%;

      .menu-box {
        position: relative;
        width: 100%;
        height: 60px;
        background-color: rgb(255, 251, 251);

        .menu-left {
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;

          .section-box {
            width: 100%;
            background-color: rgb(255, 251, 251);

            .section-box-top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              height: 50px;
              padding: 0 18px;

              h2 {
                padding-left: 8px;
                font-size: 22px;
                font-weight: 500;
                border-left: 6px solid #fb7299;
              }

              span {
                font-size: 18px;
                cursor: pointer;
              }

              span:hover {
                color: rgb(47, 178, 222);
              }

              span::after {
                content: "";
                font-size: 18px;
              }
            }

            .section-box-body {
              display: flex;
              justify-content: flex-start;
              flex-direction: row;
              flex-wrap: wrap;
              width: 100%;
              // min-height: 300px;
              padding: 0 10px 20px 10px;
              // border-bottom: 1px solid #eee;

              .section-box-body-list {
                width: 20%;
                margin-bottom: 10px;
                padding: 10px;
                border-radius: 8px;
                box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);

                img {
                  display: block;
                  width: 100%;
                  height: 200px;
                  border-radius: 8px;
                  object-fit: cover;
                  cursor: pointer;
                }

                span {
                  display: block;
                  width: 100%;
                }

                .title {
                  height: 46px;
                  margin: 15px 0;
                  overflow: hidden;
                  cursor: pointer;
                }

                .info {
                  display: flex;
                  justify-content: space-between;

                  i::before {
                    margin-right: 5px;
                  }
                }
              }

              .folde-item {
                width: 100%;
                padding: 25px 10px;
                cursor: pointer;

                &:hover {
                  span {
                    color: #00a0d8;
                  }
                }
              }

              .hide-tips {
                display: inline-block;
                width: 100%;
                padding: 20px 18px;
                color: #636161;
                text-align: center;
              }
            }
          }

          .video-sort {
            display: flex;
            align-items: center;
            width: 98%;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            // background-color: #fb7299;
            background-image: linear-gradient(to top, #fff 0%, #3c353d 100%);

            span {
              display: flex;
              align-items: center;
              height: 40px;
              padding: 0 20px;
              margin-left: 20px;
              background-color: #fff;
              border-radius: 6px;
              cursor: pointer;
            }

            span:hover {
              color: #fb7299;

              i {
                display: block;
              }
            }

            .isActive {
              color: #fb7299;
            }
          }

          .video-list {
            display: flex;
            align-items: center;
            width: 98%;
            height: 200px;
            padding: 0 20px;
            margin: 10px auto;
            background-color: #fff;
            border-radius: 10px;

            .video-list-cover {
              width: 290px;
              height: 180px;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
                cursor: pointer;
              }
            }

            .video-list-content {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              flex: 1;
              height: 180px;
              padding: 0 10px;

              .top-box {
                h2 {
                  display: inline-block;
                  font-size: 22px;
                  font-weight: 700;
                  cursor: pointer;
                }

                &:hover {
                  h2 {
                    color: #fb7299;
                  }
                }
              }

              .body-box {
                height: 110px;
                padding-right: 10px;

                p {
                  height: 100%;
                  font-size: 18px;
                  color: #636161;
                  overflow: hidden;
                }
              }

              .bottom-box {
                span {
                  i {
                    font-size: 16px;
                    font-style: normal;
                    color: #636161;
                    margin-right: 40px;
                  }
                }
              }
            }
          }

          .account-item {
            width: 98%;
            margin: 0 18px;
            padding: 10px;
            background-color: #fff;

            h2 {
              padding: 10px 0;
              font-size: 20px;
              font-weight: 600;
            }
          }

          .account-info {
            .account-form {
              width: 100%;
            }

            .account-info-btn {
              padding: 6px 20px;
              font-size: 18px;
              color: #fff;
              background-color: #00a0d8;
              border-radius: 6px;
              cursor: pointer;
            }
          }

          .account-setting {
            .account-switch {
              .account-switch-title {
                margin-right: 10px;
              }

              .account-switch-desc {
                margin-left: 5px;
              }
            }
          }

          .account-security {
            min-height: 200px;

            .account-security-item {
              display: flex;
              padding: 20px 0;
              border-top: 1px solid #e3e3e3;

              span {
                flex: 1;
              }

              span:nth-child(3) {
                color: #00a0d8;
                cursor: pointer;
              }
            }

            .account-security-item:last-child {
              border-bottom: 1px solid #e3e3e3;
            }
          }

          .collection-folder {
            position: relative;

            & > i {
              display: none;
              position: absolute;
              top: 0;
              right: 0;
              line-height: normal;
              font-style: normal;
              color: red;
            }
          }
        }

        .menu-right {
          position: absolute;
          right: 0;
          height: 100%;
          padding: 0 20px;
          padding-top: 10px;

          span {
            position: relative;
            margin: 0 20px;
            font-size: 16px;
            cursor: pointer;
          }

          span::after {
            position: absolute;
            bottom: -20px;
            left: 0;
            width: 100%;
            content: attr(data-count);
            text-align: center;
            font-size: 14px;
            color: #636161;
          }
        }
      }
    }
  }

  .update-body {
    width: 400px;
    margin: 60px auto;

    .update-item {
      width: 100%;
      margin-bottom: 20px;

      .btn {
        width: 100%;
      }
    }

    h2 {
      width: 100%;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
    }
  }
}
</style>